<template>
    <div class="bg-gray-50 min-h-[1024px]">
        <navigation></navigation>
        <div class="relative h-[200px] bg-primary overflow-hidden">
            <img :src="headerBgUrl" class="w-full h-full object-cover" />
            <div class="absolute bottom-6 left-8 flex items-center gap-4">
                <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white">
                    <img :src="userInfo.userImg" class="w-full h-full object-cover" />
                </div>
                <div class="text-white">
                    <div class="flex items-center gap-2">
                        <span class="text-lg font-medium">{{ userInfo.userName }}</span>
                        <el-icon>
                            <CircleCheckFilled />
                        </el-icon>
                    </div>
                    <div class="text-sm opacity-90">{{ userInfo.major }} / {{ userInfo.intendedPosition }}</div>
                </div>
                <div class="update" @click="toUpdate()">
                    <span>修改</span>
                </div>
            </div>
        </div>

        <div class="max-w-[1440px] mx-auto px-8 py-6">
            <div class="grid grid-cols-2 gap-6">
                <div class="space-y-6">
                    <!-- 获奖证书 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">获奖证书</h2>
                                <router-link to="/certificateAuthority/competition">
                                    <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                                </router-link>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="competition in competitions" :key="competition.id" class="border rounded p-4">
                                <div class="flex items-start gap-3">
                                    <img :src="competition.photoMaterials" class="w-16 h-16 rounded" />
                                    <div class="flex-1">
                                        <div class="flex justify-between items-start">
                                            <div>
                                                <h3 class="font-medium w-64 break-words">{{ competition.competitionName }}
                                                </h3>
                                                <p class="text-sm text-gray-600 mt-2">{{ competition.competitionOrganizer }}</p>
                                            </div>
                                            <div class="text-sm text-gray-500">{{
                                                formatDate(competition.competitionStartTime)
                                            }}—{{ formatDate(competition.competitionEndTime) }}</div>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">{{ competition.descMaterials }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 text-green-500">
                                <el-icon>
                                    <CircleCheckFilled />
                                </el-icon>
                                <span>已认证</span>
                            </div>
                        </div>
                    </el-card>

                    <!-- 我的项目 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">我的项目</h2>
                                <router-link to="/certificateAuthority/project-experience">
                                    <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                                </router-link>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="project in projects" :key="project.name" class="border rounded p-4">
                                <div class="flex items-start gap-3">
                                    <img :src="project.photoMaterials" class="w-16 h-16 rounded" />
                                    <div class="flex-1">
                                        <h3 class="font-medium mb-2 w-64 break-words">{{ project.itemName }}</h3>
                                        <div class="flex gap-2 w-64 break-words mt-2">{{ project.technologyStack }}</div>
                                        <p class="text-sm text-gray-600 mb-2 w-64 break-words mt-2">{{ project.description }}</p>
                                    </div>
                                    <div class="text-sm text-gray-500">{{ formatDate(project.itemStartTime) }}—{{
                                        formatDate(project.itemEndTime) }}</div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 text-green-500">
                                <el-icon>
                                    <CircleCheckFilled />
                                </el-icon>
                                <span>已认证</span>
                            </div>
                        </div>
                    </el-card>
                </div>

                <div class="space-y-6">
                    <!-- 通用技能 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">通用技能</h2>
                                <router-link to="/certificateAuthority/skills">
                                    <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                                </router-link>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="commonSkill in commonSkills" :key="commonSkill.id" class="border rounded p-4">
                                <div class="flex items-start gap-3">
                                    <img :src="commonSkill.skillImg" class="w-16 h-16 rounded" />
                                    <div class="flex-1">
                                        <div class="flex justify-between items-start">
                                            <div>
                                                <h3 class="font-medium w-64 break-words">{{ commonSkill.skillName }}</h3>
                                                <p class="text-sm text-gray-600 mt-2">{{ commonSkill.skillType }}</p>
                                            </div>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">{{ commonSkill.skillGrade }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 text-green-500">
                                <el-icon>
                                    <CircleCheckFilled />
                                </el-icon>
                                <span>已认证</span>
                            </div>
                        </div>
                    </el-card>

                    <!-- 实习经历 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">实习经历</h2>
                                <router-link to="/certificateAuthority/internship-experience">
                                    <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                                </router-link>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="experience in internships" :key="experience.company" class="border rounded p-4">
                                <div class="flex items-start gap-3">
                                    <img :src="experience.internshipPhoto" class="w-16 h-16 rounded" />
                                    <div class="flex-1">
                                        <div class="flex justify-between items-start">
                                            <div>
                                                <h3 class="font-medium">{{ experience.companyId }}</h3>
                                                <p class="text-sm text-gray-600 mt-2">{{ experience.position }}</p>
                                            </div>
                                            <div class="text-sm text-gray-500">{{ formatDate(experience.internshipStarttime)
                                            }}—{{ formatDate(experience.internshipEndtime) }}</div>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-2">{{ experience.internshipSuccess }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 text-green-500">
                                <el-icon>
                                    <CircleCheckFilled />
                                </el-icon>
                                <span>已认证</span>
                            </div>
                        </div>
                    </el-card>

                    <!-- 我的活动 -->
                    <el-card shadow="hover">
                        <template #header>
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-medium">我的活动</h2>
                                <router-link to="/certificateAuthority/activity">
                                    <el-button text type="primary" class="text-sm">查看更多 ></el-button>
                                </router-link>
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div v-for="activity in activities" :key="activity.name" class="border rounded p-4">
                                <div class="flex items-start gap-3">
                                    <img :src="activity.activityImg" class="w-16 h-16 rounded" />
                                    <div class="flex-1">
                                        <h3 class="font-medium mb-2">{{ activity.activityName }}</h3>
                                        <div class="flex items-center gap-2 text-sm text-gray-500 mt-2">
                                            <el-icon>
                                                <Trophy />
                                            </el-icon>
                                            <span>{{ activity.organization }}</span>
                                        </div>
                                        <p class="text-sm text-gray-600 mb-2 mt-2">{{ activity.description }}</p>
                                    </div>
                                    <div class="text-sm text-gray-500">{{ formatDate(activity.startTime) }}—{{
                                        activity.endTime }}</div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 text-green-500">
                                <el-icon>
                                    <CircleCheckFilled />
                                </el-icon>
                                <span>已认证</span>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { CircleCheckFilled, Location, Trophy } from '@element-plus/icons-vue';
import navigation from "../../views/navigation.vue"
import { getStudentBaseInfo } from '@/api/student/personCenter/stuPersonCenter';
import { getInternship } from '@/api/student/certification/stuInternship';
import { getProject } from '@/api/student/certification/stuProject';
import { getActivity } from '@/api/student/certification/stuActivity';
import { getCompetition } from '@/api/student/certification/stuCompetition';
import { getCommonSkillList } from '@/api/student/certification/stuCommonSkill';




// 移除类型声明
const headerBgUrl = 'https://ai-public.mastergo.com/ai/img_res/a5b398bd4cbe9e7e4e4c8693177f25ed.jpg';
const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/853f78ddce42d62aa122baa67d169680.jpg';
const certificateUrl = 'https://ai-public.mastergo.com/ai/img_res/ae73b55ce9c00277f3d86171b05f45e8.jpg';

// 使用 JavaScript 的导入方式
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

// 获取用户基本信息
// 用户信息
const userInfo = ref({
    userName: '',
    major: '',
    intendedPosition: '',
    userImg: '',
});
const fetchStudentInfo = async () => {
    try {
        const data = await getStudentBaseInfo();
        // 将用户数据映射到 userInfo 中
        userInfo.value = data;
    } catch (error) {
        ElMessage.error('用户信息获取失败，请稍后再试');
    }
};

// 日期格式化方法
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`; // 返回 yyyy-mm-dd 格式
};

// 竞赛经历
const competitions = ref([
    {
        id: '',
        competitionName: '腾讯科技',
        competitionOrganizer: 'AI 研究部 - 算法工程师',
        competitionStartTime: '',
        competitionEndTime: '',
        descMaterials: '负责计算机视觉相关算法研究与开发，参与多个实际项目的落地实施',
        photoMaterials: 'https://ai-public.mastergo.com/ai/img_res/aaeaf381598e681015178a6a154a63a4.jpg'
    }
]);

// 通用技能列表
const commonSkills = ref([
    {
        id: '',
        skillName: '',
        skillGrade: '腾讯科技',
        skillType: 'AI 研究部 - 算法工程师',
        skillImg: 'https://ai-public.mastergo.com/ai/img_res/aaeaf381598e681015178a6a154a63a4.jpg'
    }
]);

// 项目经历
const projects = ref([
    {
        itemName: '智能图像识别系统',
        description: '基于深度学习的多场景图像识别系统，支持物体检测、人脸识别等多种功能',
        tags: [
            { name: 'Python', type: 'primary' },
            { name: 'TensorFlow', type: 'success' },
            { name: 'OpenCV', type: 'warning' }
        ],
        itemStartTime: '',
        itemEndTime: '',
        technologyStack: '',
        photoMaterials: '',
    },
    {
        name: '智慧校园管理平台',
        description: '集成学生信息管理、课程安排、考勤系统等功能的综合管理平台',
        tags: [
            { name: 'Vue.js', type: 'warning' },
            { name: 'Node.js', type: 'danger' },
            { name: 'MySQL', type: 'info' }
        ],
        date: '2023.03 - 2023.08'
    }
]);

// 实习经历
const internships = ref([
    {
        companyId: '腾讯科技',
        position: 'AI 研究部 - 算法工程师',
        internshipStarttime: '',
        internshipEndtime: '',
        internshipSuccess: '负责计算机视觉相关算法研究与开发，参与多个实际项目的落地实施',
        internshipPhoto: 'https://ai-public.mastergo.com/ai/img_res/aaeaf381598e681015178a6a154a63a4.jpg'
    }
]);

// 活动经历
const activities = ref([
    {
        activityName: '2024 全球人工智能技术大会',
        description: '作为特邀嘉宾分享深度学习在计算机视觉领域的最新应用',
        organization: '北京国际会议中心',
        startTime: '',
        endTime: '',
        activityImg: '',
    }
]);

// 逻辑函数
function toUpdate() {
    router.push('/modifiedinformation');
}

// 组件挂载时从后端接口获取数据
onMounted(() => {
    //查询用户基本信息
    fetchStudentInfo();

    // 使用 Promise.all 确保所有选项数据加载完成
    Promise.all([
        getInternship({ status: 1 }),
        getProject({ status: 1 }),
        getActivity({ status: 1 }),
        getCompetition({ status: 1 }),
        getCommonSkillList({ status: 1 }),
    ]).then(([internshipList, projectList, activitieList, competitionList, commonSkillList]) => {
        // 填充选项数据
        internships.value = internshipList;
        projects.value = projectList;
        activities.value = activitieList;
        competitions.value = competitionList;
        commonSkills.value = commonSkillList;
    });
});
</script>

<style scoped>
:deep(.el-card__body) {
    padding: 16px;
}

:deep(.el-progress-bar__outer) {
    border-radius: 9999px;
    background-color: #f3f4f6;
}

:deep(.el-progress-bar__inner) {
    border-radius: 9999px;
    background-color: #4A90E2;
}

.update {
    color: white;
    margin-top: 4vh;
}</style>